<!--分类管理子表新增修改-->
<template>
  <div class="editcontainer">
    <el-dialog
      :title="titleMap[childEdittitle]"
      :visible.sync="vis"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="500px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="变量名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="key">
          <el-input v-model="ruleForm.key" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="ruleForm.description" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="是否可写" prop="write">
          <el-radio-group v-model="ruleForm.write">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <button
          @click="submitForm('ruleForm')"
          class="dialogbutton confim"
          v-if="childEdittitle=='addData' "
        >确 定</button>
        <button @click="editForm('ruleForm')" class="dialogbutton confim" v-else>提 交</button>
        <button @click="cancle" class="dialogbutton calce">取 消</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vis: false,
      ruleForm: {
        name: "",
        key: "",
        description: "",
        write: "0"
      },
      rules: {
        name: [
          { required: true, message: "请输入制造商名称", trigger: "blur" }
        ],
        key: [{ required: true, message: "请输入关键字", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ],
        write: [{ required: true, message: "请选择", trigger: "blur" }]
      },
      titleMap: {
        addData: "子表添加",
        updateData: "子表编辑"
      }
    };
  },
  props: {
    childDialogFormVisible: Boolean,
    childEdittitle: String,
    childRoleform: Object
  },
  watch: {
    childDialogFormVisible(newValue, oldValue) {
      this.vis = newValue;
    },
    childRoleform(newValue, oldValue) {
      this.ruleForm = newValue;
    }
  },
  methods: {
    cancle() {
      this.$emit("backtable");
    },
    //关闭弹框
    closeDialog() {
      this.$emit("backtable", true);
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldSave", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑
    editForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldEdit", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-dialog,
/deep/ .el-pager li {
  background: url(../../../../static/image/dialog_top.png) no-repeat;
  background-size: 100%100%;
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  color: #fff;
}
@import "../../../assets/css/dialog";
</style>